<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>HTML网页动态元素操作</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<script>
    let current_el;
    var key = 10;
    window.onload = function onload(){
        console.log('dom loaded');
    }
    function addEl(){
        let el = document.getElementById('el');
        key++;
        let new_el = document.createElement('p');
        new_el.innerText = key;
        new_el.id = key;
        document.getElementById('content').appendChild(new_el);
    }

    function moveElement(){
        let content_el = document.getElementById('content');
        console.log(content_el.children.length);
        if (content_el.children.length>1){
            let last_child = content_el.children[content_el.children.length - 1];
            document.getElementById('content0').appendChild(last_child);
            document.body.appendChild(last_child);
        }
    }
</script>

<body>
    <div id="app">
        <input id='el' type="text">
        <button onclick="addEl()">增加元素</button>
        <button onclick="moveElement()">移动元素</button>

        <hr>
        <h1 id='el1'>el1</h1>
        <p id='p1'>p1</p>
        <div id='content0'></div>
        <hr>
        <div id='content'></div>
    </div>
    <hr>
</body>

</html>